import { Button, Switch, Tooltip } from 'antd';
import MyIcon from '@/components/MyIcon';
import pageStyles from '@/common/pageLayout.less';
import { EditOutlined, AppstoreAddOutlined, EyeOutlined } from '@ant-design/icons';
import { IRouleColumnsOpt } from '../type';

const Operation = (
  permissions: Record<string, any>,
  clickFnc: IRouleColumnsOpt,
  record?: Record<string, any>,
) => {
  let operationArray = [];

  const Edit = record?.id &&
    record?.isOpen == 1 &&
    permissions['/roleController/edit'] && (
      <Button
        className='manageBtntTxtStyle'
        onClick={() => {
          clickFnc?.onEditAdd(record);
        }}
        type={'link'}
        size={'small'}
        icon={<EditOutlined />}
        key={record?.id + 'EditOutlinedRoule'}
      >
        编辑
      </Button>
    );

  const Grant = record?.id &&
    record?.isOpen == 1 &&
    permissions['/roleController/edit'] && (
      <Button
        className='manageBtntTxtStyle'
        onClick={() => {
          clickFnc?.grantOption(record);
        }}
        type={'link'}
        size={'small'}
        icon={<AppstoreAddOutlined />}
        key={record?.id + 'AppstoreAddOutlinedGrant'}
      >
        授权
      </Button>
    );

  const View = record?.id && permissions['/roleController/getRoleByID/{id}'] && (
    <Button
      className='manageBtntTxtStyle'
      onClick={() => {
        clickFnc?.openViewInfo(record);
      }}
      type={'link'}
      size={'small'}
      icon={<EyeOutlined />}
      key={record?.id + 'EyeOutlinedView'}
    >
      查看
    </Button>
  );

  operationArray = [View, Edit, Grant];
  return operationArray;
};

const getResouColumns: any = (
  permissions: Record<string, any>,
  clickFnc: IRouleColumnsOpt,
  seachValue: string,
) => {
  return [
    {
      title: '角色名称',
      dataIndex: 'name',
      key: 'name',
      width: 240,
      fixed: 'left',
      ellipsis: {
        showTitle: true,
      },
      visible: true,
      unDrag: true,
      showSorterTooltip: false,
      render: (text: string, record: Record<string, any>) => {
        const index = text ? text.indexOf(seachValue) : -1;
        const beforeStr = text ? text.substr(0, index) : '';
        const afterStr = text ? text.substr(index + seachValue.length) : '';
        const title =
          index > -1 && seachValue != '' ? (
            <span>
              {beforeStr}
              <span style={{ color: '#f50' }}>{seachValue}</span>
              {afterStr}
            </span>
          ) : (
            <span>{text}</span>
          );

        return (
          <Tooltip title={title} placement="top">
            <span
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: '100%' }}
              id={record?.id}
            >
              <MyIcon type="icon-renliziyuan" />
              &nbsp;
              {title ?? '--'}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '上级角色',
      dataIndex: 'pName',
      key: 'pName',
      width: 200,
      visible: true,
      showSorterTooltip: false,
      render: (text: string) => {
        return (
          <div
            className={pageStyles['over-flow-hidden']}
          >
            {text || '--'}
          </div>
        );
      },
    },
    {
      title: '角色描述',
      dataIndex: 'describeInfo',
      key: 'describeInfo',
      width: 260,
      visible: true,
      showSorterTooltip: false,
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 250 }}
            >
              {text || '--'}
            </div>
          </Tooltip>
        );
      },
    },
    {
      title: '排序',
      dataIndex: 'seq',
      key: 'seq',
      width: 100,
      visible: true,
      showSorterTooltip: false,
      sorter: (a: any, b: any) => {
        if (a.seq < b.seq) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 80 }}
            >
              {text || '0'}
            </div>
          </Tooltip>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'isOpen',
      key: 'isOpen',
      width: 100,
      visible: true,
      showSorterTooltip: false,
      // sorter: (a: any, b: any) => {
      //   if (a.isOpen < b.isOpen) {
      //     return -1;
      //   } else {
      //     return 1;
      //   }
      // },
      render: (text: string, record: Record<string, any>) => {
        return (
          <>
            <Switch
              checkedChildren="启用"
              unCheckedChildren="禁用"
              checked={text == '1' ? true : false}
              onChange={(checked: boolean) => {
                clickFnc?.onChangeIsOpen(checked, record);
              }}
              disabled={permissions['/roleController/modifyState'] && record?.pID ? false : true}
            />
          </>
        );
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 200,
      visible: true,
      showSorterTooltip: false,
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div
              className={pageStyles['over-flow-hidden']}
              style={{ maxWidth: 180 }}
            >
              {text || '--'}
            </div>
          </Tooltip>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      width: 200,
      key: 'option',
      fixed: 'right',
      visible: true,
      unDrag: true,
      showSorterTooltip: false,
      render: (_text: string, record: Record<string, any>) => {
        return (
          <div
            style={{
              display: 'flex',
            }}
          >
            {Operation(permissions, clickFnc, record)}
          </div>
        );
      },
    },
  ];
};
export { getResouColumns };
